<template>
	<el-card v-if="visitor" class="box-card">
		<div class="top">
			<div class="left">
				<span class="free">{{ visitor.isInsure ? "医保" : "自费" }}</span>
				<span class="username">{{ visitor.name }}</span>
			</div>
			<div class="right">
				<!-- circle 圆角 -->
				<el-button @click="editVisitor" circle type="primary" :icon="Edit"></el-button>
				<el-popconfirm @confirm="deleteVisitor" width="200" :title="`确定要删除${visitor.name}吗？`">
					<template #reference>
						<el-button v-if="$route.path === '/user/patient'" circle type="danger" :icon="Delete"></el-button>
					</template>
				</el-popconfirm>
			</div>
		</div>
		<div class="bottom">
			<p>证件类型：{{ visitor.param.certificatesTypeString }}</p>
			<p>证件号码：{{ visitor.certificatesNo }}</p>
			<p>用户性别：{{ visitor.sex ? "男" : "女" }}</p>
			<p>出生日期：{{ visitor.birthdate }}</p>
			<p>手机号码：{{ visitor.phone }}</p>
			<p>婚姻状况：{{ visitor.isMary ? "已婚" : "未婚" }}</p>
			<p>当前住址：{{ visitor.param.cityString }}</p>
			<p>详细地址：{{ visitor.param.fullAddress }}</p>
			<!-- 红色的已选择 -->
			<transition name="confirm">
				<div v-if="confrimed === visitor.id" class="confirm">已选择</div>
			</transition>
		</div>
	</el-card>
</template>

<script setup lang="ts">
import { Visitor } from "@/api/hospital/type"
import { reqDeleteVisitor } from "@/api/user";
// 引入饿了么图标
import { Edit, Delete } from "@element-plus/icons-vue"
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";


defineOptions({
	name: "Visitor"
})
// 接收组件传参
let props = defineProps<{ visitor: Visitor, confrimed?: number }>()
// 接收自定义事件
let emit = defineEmits(['changeEdit', 'refreshPage'])
// 实例化路由
const route = useRoute()
const router = useRouter()


// 编辑按钮的回调
function editVisitor() {
	if (route.path === "/hospital/register_step2") {
		router.push({
			path: "/user/patient",
			query: {
				type: 'edit',
				id: props.visitor.id
			}
		})
	} else {
		emit('changeEdit', props.visitor)
	}
}
// 删除按钮的回调
async function deleteVisitor() {
	try {
		// 携带就诊人 id ，发送请求
		await reqDeleteVisitor(props.visitor.id)
		// 提示框
		ElMessage({
			type: "success",
			message: "删除成功"
		})
		// 通知父组件更新数据
		emit('refreshPage')
	} catch (error) {
		// 提示框
		ElMessage({
			type: "success",
			message: "删除失败"
		})
	}
}
</script>

<style scoped lang="scss">
:deep(.el-card__body) {
	padding: 0;
}

.box-card {
	.top {
		height: 60px;
		background-color: #e5e5e5;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.left {
			width: 60%;

			.free {
				background-color: white;
				padding: 5px;
				font-size: 12px;
				margin-right: 5px;
				border-radius: 10px;
			}

			.username {
				color: #7f7f7f;
			}
		}
	}

	.bottom {
		padding: 20px;
		// 相对定位
		position: relative;

		p {
			line-height: 40px;
		}

		.confirm {
			// 绝对定位
			position: absolute;
			width: 200px;
			height: 200px;
			color: red;
			border-radius: 50%;
			border: 1px dashed red;
			// 以下两步是为了让字体在边框中央
			text-align: center;
			line-height: 200px;
			left: 20%;
			top: 20%;
			// 透明度
			opacity: .3;
			// 旋转角度
			transform: rotate(35deg);
			// 字体粗细
			font-weight: bold;
		}

		// 过渡动画
		.confirm-enter-from {
			transform: scale(1);
		}

		.confirm-enter-active {
			transition: all .3s;
		}

		.confirm-enter-to {
			transform: scale(1.2);
		}
	}
}
</style>